<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!-- MDB -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/1.0.0/mdb.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/login_css.css">
</head>
<body>
<form class="login-area card shadow-2" id="login_form" :action="action">

    <div style="margin: auto;height:120px;width: 120px;">
        <img src="img/default_user.png"/>
    </div><br>
    <div class="" :style="{display:flag?'block':'none'}">
        <div class="input-group form-outline">
            <span class="input-group-text" id="account_input">账号</span>
            <input
                    v-model="account"
                    type="text"
                    class="form-control"
                    id="account"
                    aria-describedby="inputGroupPrepend3"
                    required/>
            <label for="account" class="form-label">账号</label>
        </div>
    </div>
    <div class="" :style="{display:flag?'none':'block'}">
        <br>
        <div class="input-group form-outline">
            <span class="input-group-text" id="username_input">昵称</span>
            <input
                    v-model="name"
                    type="text"
                    class="form-control"
                    id="username"
                    aria-describedby="inputGroupPrepend3"
                    required/>
            <label for="username" class="form-label">昵称</label>
        </div>
    </div>
    <div class="">
        <br>
        <div class="input-group form-outline">
            <span class="input-group-text" id="password_input">密码</span>
            <input
                    v-model="password"
                    type="password"
                    class="form-control"
                    id="password"
                    aria-describedby="inputGroupPrepend3"
                    required/>
            <label for="password" class="form-label">密码</label>
        </div>
    </div>
    <div class="" :style="{display:flag?'none':'block'}">
        <br>
        <div class="input-group form-outline">
            <span class="input-group-text" id="password_input_2">确认密码</span>
            <input
                    v-model="password2"
                    type="password"
                    class="form-control"
                    id="password_2"
                    aria-describedby="inputGroupPrepend3"
                    required/>
            <label for="password" class="form-label">确认密码</label>
        </div>
    </div><br>

    <button type="button" class="btn btn-outline-primary" data-ripple-color="dark" @click="login">
        {{btnText}}
    </button><br>
    <p style="text-align: center;cursor: pointer;visibility: hidden" @click="changeFlag">{{tips}}</p>
</form>

<!-- MDB -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/1.0.0/mdb.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>